// =============================================================================
// SCSS/SITE/STACKS/ETHOS/_CODE.SCSS
// -----------------------------------------------------------------------------
// Typography styles for the <code> and <pre> elements.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Inline and Block Code Styles
//   02. Inline Code
//   03. Blocks of Code
// =============================================================================

// Inline and Block Code Styles
// =============================================================================

code,
pre {
  @include font-family-monospace();
  color: $headingsColor;
  background-color: $bodyBackground;
}



// Inline Code
// =============================================================================

code {
  padding: 0.243em 0.386em;
  font-size: 0.875em;
}



// Blocks of Code
// =============================================================================

pre {
  display: block;
  padding: 1.45em 1.65em;
  margin: 0 0 $baseMargin;
  font-size: 1.15em;
  line-height: $baseLineHeight;
  word-break: break-all;
  word-wrap: break-word;
  white-space: pre;
  white-space: pre-wrap;

  code { 
    padding: 0;
    background-color: transparent;
    border: 0;
  }
}


//
// Enable scrollable blocks of code.
//

.pre-scrollable {
  max-height: 360px;
  overflow-y: scroll;
}